<template>
  <div style="height: 100%; width: 100%">
    <div>
      <!--    1、  输入框 头部 -->
      <div class="child1" style="height: 6vh">
        <el-input
          placeholder="请输入内容"
          v-model="input3"
          class="inp-with-select"
        >
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="java" value="1"></el-option>
            <el-option label="小说" value="2"></el-option>
            <el-option label="pycharm" value="3"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <el-button type="button" @click="dialogVisible = true" class="button-en"
          >发布文章</el-button
        >
      </div>

      <!--   2、身体 内容第二部分-->
      <div class="child2" style="height: 60vh">
        <el-table
          :data="article"
          style="width: 100%; margin: 0 auto"
          height="60vh"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="作者名称">
                  <span>{{ props.row.nickName }}</span>
                </el-form-item>
                <el-form-item label="点赞量">
                  <span>{{ props.row.good }}</span>
                </el-form-item>
                <el-form-item label="文章标签">
                  <el-tag
                    v-for="item in items"
                    :key="item.label"
                    :type="item.type"
                    effect="plain"
                  >
                    {{ item.label }}
                  </el-tag>
                </el-form-item>
                <el-form-item label="浏览量">
                  <span>{{ props.row.like }}</span>
                </el-form-item>
                <el-form-item label="所属分类">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
                <el-form-item label="评论数量">
                  <span>{{ props.row.desc }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="文章 ID" prop="id" width="180" align="center">
          </el-table-column>
          <el-table-column label="文章标题" prop="title" align="center">
          </el-table-column>
          <el-table-column label="文章描述" prop="content" align="center">
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button
                type="button"
                size="small"
                style="color: rgb(43, 200, 147)"
                @click="LookClick(scope.$index, scope.row)"
                >查看</el-button
              >
              <el-popconfirm title="内容确定删除吗？">
                <el-button
                  type="button"
                  size="small"
                  style="color: rgb(255, 51, 51)"
                  slot="reference"
                  @click="DeleteClick(scope.$index, scope.row)"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--  3、分页    -->
      <div class="tag_div_footer">
        <div class="block">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
          >
          </el-pagination>
        </div>
    </div>
    </div>

    <!--    modal=false时防止它弹框有阴影文章发布  -->
    <el-dialog
      title="发布文章"
      :visible.sync="dialogVisible"
      width="70%"
      :modal="false"
    >
      <span>封面&摘要</span>
      <span>
        <el-radio v-model="radio" label="1">有封面</el-radio>
        <el-radio v-model="radio" label="2">无封面</el-radio>
      </span>
      <div class="sp">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          class="img-sc"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-input
          type="textarea"
          placeholder="请输入摘要和标题"
          v-model="text1area"
          maxlength="200"
          show-word-limit
          :autosize="{ minRows: 6, maxRows: 6 }"
          class="input-kk"
        >
        </el-input>
        <el-dialog :visible.sync="dakewVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </div>

      <div class="fenl">
        分类专栏：
        <el-select v-model="value" filterable placeholder="请选择">
          <el-option
            v-for="item in ppos"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <el-input
          label="内容"
          type="textarea"
          placeholder="请输入内容"
          v-model="textarea"
          maxlength="1000"
          show-word-limit
          :autosize="{ minRows: 8, maxRows: 10 }"
        >
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<!-- 引入外部CSS文件 -->
<style>
@import url(../../css/articView.css);
</style>

<script>
export default {
  data() {
    return {
      // 分页工具
      Page: 1,
      pageSize: 10,
      total: 100,

      currentPage4: 3,
      text1area: "",
      textarea: "",
      dialogImageUrl: ":d/files ",
      dakewVisible: false,
      radio: "",
      count: "2",
      dialogVisible: false,
      input3: " ",
      select: "1",
      /*发布文章里面的分类*/
      ppos: [
        {
          value: "选项1",
          label: "java",
        },
        {
          value: "选项2",
          label: "pycharm",
        },
        {
          value: "选项3",
          label: "c++",
        },
        {
          value: "选项4",
          label: "小说",
        },
        {
          value: "选项5",
          label: "java",
        },
      ],
      value: "",
      /*折叠表内数据*/
      article: [
        {
          id: "19999999",
          nickName: "张三",
          nameID: "12223344",
          title: "完美世界",
          content: "小石和大石的双神之战",
          createTime: "2020-05-15",
          updateTime: "2020-05-15",
          category: "小说",
          good: "120",
          like: "2000",
          desc: "0",
        },
        {
          id: "19999999",
          nickName: "张三",
          nameID: "12223344",
          title: "完美世界",
          content: "小石和大石的双神之战",
          createTime: "2020-05-15",
          updateTime: "2020-05-15",
          category: "小说",
          good: "120",
          like: "2000",
          desc: "0",
        },
        {
          id: "19999999",
          nickName: "张三",
          nameID: "12223344",
          title: "完美世界",
          content: "小石和大石的双神之战",
          createTime: "2020-05-15",
          updateTime: "2020-05-15",
          category: "小说",
          good: "120",
          like: "2000",
          desc: "0",
        },
        {
          id: "19999999",
          nickName: "张三",
          nameID: "12223344",
          title: "完美世界",
          content: "小石和大石的双神之战",
          createTime: "2020-05-15",
          updateTime: "2020-05-15",
          category: "小说",
          good: "120",
          like: "2000",
          desc: "0",
        },
        {
          id: "19999999",
          nickName: "张三",
          nameID: "12223344",
          title: "完美世界",
          content: "小石和大石的双神之战",
          createTime: "2020-05-15",
          updateTime: "2020-05-15",
          category: "小说",
          good: "120",
          like: "2000",
          desc: "0",
        },
        {
          id: "19999999",
          nickName: "张三",
          nameID: "12223344",
          title: "完美世界",
          content: "小石和大石的双神之战",
          createTime: "2020-05-15",
          updateTime: "2020-05-15",
          category: "小说",
          good: "120",
          like: "2000",
          desc: "0",
        },
        {
          id: "19999999",
          nickName: "张三",
          nameID: "12223344",
          title: "完美世界",
          content: "小石和大石的双神之战",
          createTime: "2020-05-15",
          updateTime: "2020-05-15",
          category: "小说",
          good: "120",
          like: "2000",
          desc: "0",
        },
        {
          id: "19999999",
          nickName: "张三",
          nameID: "12223344",
          title: "完美世界",
          content: "小石和大石的双神之战",
          createTime: "2020-05-15",
          updateTime: "2020-05-15",
          category: "小说",
          good: "120",
          like: "2000",
          desc: "0",
        },
        {
          id: "19999999",
          nickName: "张三",
          nameID: "12223344",
          title: "完美世界",
          content: "小石和大石的双神之战",
          createTime: "2020-05-15",
          updateTime: "2020-05-15",
          category: "小说",
          good: "120",
          like: "2000",
          desc: "0",
        },
        {
          id: "19999999",
          nickName: "张三",
          nameID: "12223344",
          title: "完美世界",
          content: "小石和大石的双神之战",
          createTime: "2020-05-15",
          updateTime: "2020-05-15",
          category: "小说",
          good: "120",
          like: "2000",
          desc: "0",
        },
      ],
      /*文章标签*/
      items: [
        { type: "in", label: "java" },
        { type: "success", label: "c++" },
        { type: "info", label: "pycharm" },
        { type: "danger", label: "大数据分析" },
        { type: "warning", label: "计算机" },
      ],
    };
  },
  methods: {
    LookClick(index, row) {
      console.log("查看行：", index, row);
    },
    DeleteClick(index, row) {
      console.log("删除行：", index, row);
      this.article.splice(index, 1);
    },
    // 分页工具
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dakewVisible = true;
    },
  },
};
</script>
